<template>
  <el-container>
    <el-header style="margin-top: 40px;">
      <el-row>
        <el-col :span="2">
          <el-button-group>
            <el-button @click="load" type="primary"><i class="el-icon-refresh"></i></el-button>
            <el-button @click="$router.push({name: 'ContentUpdate'})" type="primary"><i class="el-icon-plus"></i></el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
        <el-table
          v-loading="page.loading"
          :data="table.data"
          empty-text="暂无数据"
          style="width: 100%">
          <el-table-column
            sortable
            prop="id"
            label="编号">
          </el-table-column>
          <el-table-column
            sortable
            prop="section"
            label="版块">
            <template slot-scope="scope">
              {{scope.row.section}}({{scope.row.subSection}})
            </template>
          </el-table-column>
          <el-table-column
            sortable
            prop="title"
            label="标题">
          </el-table-column>
          <el-table-column
            prop="image"
            label="封面">
            <template slot-scope="scope">
              <el-avatar :src="scope.row.image" shape="square"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            prop="content"
            label="类型">
            <template slot-scope="scope">
              <el-tag type="primary">{{ scope.row.content | typeFilter }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="button"
            label="操作">
            <template slot-scope="scope">
              <el-button-group>
                <el-button @click="show(scope.row)" type="primary" icon="el-icon-s-order"></el-button>
                <el-button @click="update(scope.row)" type="primary" icon="el-icon-edit"></el-button>
                <el-button @click="remove(scope.row)" type="primary" icon="el-icon-delete"></el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @current-change="load"
          layout="prev, pager, next"
          :total="table.total"
          :page-size="table.size"
          :current-page="table.page">
        </el-pagination>
    </el-main>

    <el-dialog
      :close-on-click-modal="false"
      :title="dialog.view.title"
      :visible.sync="dialog.view.display"
      width="60%">
      <span v-html="dialog.view.content"></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click=" dialog.view.display = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import {page, remove } from "@/api/content";

export default {
  name: "ContentList",
  data () {
    return {
      table: {
        data: null,
        page: 1,
        size: 10,
        total: null
      },
      dialog: {
        view: {
          display: false,
          content: '',
          title: ''
        }
      },
      page: {
        loading: true
      }
    }
  },
  filters: {
    typeFilter (value) {

      if (value.indexOf('<img') >= 0) {
        return "图文内容"
      }

      if (value.indexOf('<iframe') >= 0) {
        return "视频内容"
      }

      return "文本内容"
    }
  },
  methods: {
    test (page) {
      console.log(page)
    },
    update (row) {
      this.$router.replace({name: 'ContentUpdate', query: row})
    },
    remove (row) {
      this.$confirm('您是否确认删除该内容', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(row.id).then( res => {
          this.load()
        })
      })
    },
    show (row) {
      this.dialog.view = {
        display: true,
        content: row.content,
        title: row.title
      };
    },
    load (_page) {
      this.page.loading = true
      let _current = 1
      if (_page === undefined)
        _current = this.table.page;
      else
        _current = _page
      page({ page: _current, size: this.table.size }).then( res => {
        const { list, count } = res.data
        this.table.data = []
        this.table.data = list
        this.table.total = count
        this.page.loading = false
      }).catch(err => {
        this.page.loading = false
        console.log(err)
      })
    }
  },
  mounted() {
    this.load();
  }
}
</script>

<style scoped>

</style>
